<template>
    <div class="common-layout">
        <el-row class="search-box">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
                <el-form-item label="客户名称" prop="nickname">
                    <el-input v-model="queryParams.customerName" placeholder="请输入名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" size="small" @click="queryList">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-container>
            <el-aside class="customerInfo">
                <div class="title">

                </div>
                <el-row v-loading="loading">
                    <el-table :data="tableData" size="big" @row-click="rowClick">
                        <el-table-column prop="indexId" label="序号" type="index" width="60" align="center" />
                        <!-- <el-table-column prop="id" label="用户编号" align="center" /> -->
                        <el-table-column prop="customerName" label="客户姓名" width="80px" align="center" />
                        <el-table-column prop="customerAge" label="年龄" width="60px" align="center" />
                        <el-table-column prop="customerSex" label="性别" width="60px" align="center" :formatter="formatSex" />
                        <el-table-column prop="roomNo" label="房间号" width="70px" align="center" />
                        <el-table-column prop="bedId" label="床位号" width="70px" align="center" />
                        <el-table-column prop="levelName" label="护理级别" width="80px" align="center" />
                        <el-table-column prop="nickName" label="护理人员" width="80px" align="center" />
                        <el-table-column label="操作" width="190px" align="center">
                            <template #default="scope">
                                <el-button type="primary" size="small" icon="Edit" round
                                    @click="updateSetAddItem(scope.row.customerId, scope.row.levelId)">添加项目</el-button>
                                <el-button type="danger" size="small" icon="Delete" round
                                    @click="deleteSeting(scope.row.customerId)">删除配置</el-button>
                                <el-button type="success" size="small" icon="Edit" round
                                    @click="updateSet(scope.row.customerId)">护理等级配置</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams.total"
                        v-model:page-size="queryParams.size" v-model:current-page="queryParams.current"
                        @current-change="queryList" @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
                </el-row>
            </el-aside>

            <el-aside class="outward">
                <div class="title">

                </div>
                <el-row v-loading="loading">
                    <el-table :data="tableData1" size="big">
                        <el-table-column prop="indexId" label="序号" type="index" width="60" align="center" />
                        <!-- <el-table-column prop="id" label="用户编号" align="center" /> -->
                        <el-table-column prop="customerName" label="客户姓名" width="80px" align="center" />
                        <el-table-column prop="nursingName" label="项目名称" width="80px" align="center" />
                        <el-table-column prop="nurseNumber" label="购买数量" width="80px" align="center" />
                        <el-table-column prop="buyTime" label="购买时间" width="110px" align="center" />
                        <el-table-column prop="maturityTime" label="到期时间" width="110px" align="center" />
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button type="primary" size="small" icon="Edit" round
                                    @click="updateSetItem(scope.row.id)">修改项目</el-button>
                                <el-button type="danger" size="small" icon="Delete" round
                                    @click="deleteSetIteming(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination layout="sizes ,prev, pager, next, jumper, ->, total," :total="queryParams1.total"
                        v-model:page-size="queryParams1.size" v-model:current-page="queryParams1.current"
                        @current-change="queryList" @size-change="queryList" :page-sizes="[2, 3, 5, 10, 20]" />
                </el-row>


            </el-aside>
        </el-container>
        <el-dialog v-model="showSet" title="级别编辑" style="width: 600px;">
            <Set v-if="showSet" :closeSet="closeSet" :customerId="customerId" />
        </el-dialog>

        <el-dialog v-model="showSetAdd" title="项目修改" style="width: 600px;">
            <SetAdd v-if="showSetAdd" :closeSetAdd="closeSetAdd" :customerId="customerId" :levelIdold="levelIdold"
                :setId="setId" />
        </el-dialog>
    </div>
</template>

<script setup name="careSetUp">
import { ref, reactive, onMounted } from "vue";
import { customerlistInfo, itemListInfo, deleteSet, deleteSetItem } from "@/api/CareManagement/careSetup/index.js"
import { ElMessageBox, ElNotification } from 'element-plus';
import Set from "./setlevel.vue"
import SetAdd from "./setadd.vue"
const loading = ref(false)
const customerId = ref(0)
const levelIdold = ref(0)
const setId = ref(0)
const tableData = ref([])
const tableData1 = ref([])
const queryParams = reactive({
    customerId: "", // 客户ID
    customerName: "", // 客户名称
    current: 1, // 当前页码
    size: 10, // 每页大小
    total: 0 // 总记录数
});
const queryParams1 = reactive({
    customerId: "", // 客户ID
    customerName: "", // 客户名称
    current: 1, // 当前页码
    size: 10, // 每页大小
    total: 0 // 总记录数
});
const showSet = ref(false)
const showSetAdd = ref(false)
const updateSetAddItem = (id, levelId) => {
    levelIdold.value = levelId
    customerId.value = id
    showSetAdd.value = true
}
const closeSetAdd = (query) => {
    showSetAdd.value = false;
    if (query) {
        queryList();
    }
}
const updateSet = (id) => {
    customerId.value = id
    showSet.value = true
}
const updateSetItem = (id) => {
    setId.value = id
    showSetAdd.value = true
}
const closeSet = (query) => {
    showSet.value = false;
    if (query) {
        queryList();
    }
}
const formatSex = (row, column, cellValue) => {
    return cellValue === 0 ? '男' : cellValue === 1 ? '女' : '';
};
const rowClick = (row) => {
    queryParams.customerName = row.customerName; // 同步到左侧表格的查询参数
    queryParams1.customerName = row.customerName; // 同步到右侧表格的查询参数
    queryList(); // 刷新两侧表格数据
    queryParams.customerName = "";
};
async function queryList() {
    loading.value = true;
    queryParams1.customerName = queryParams.customerName
    try {
        // 明确传递 queryParams 的必要字段，避免冗余数据
        const page = await customerlistInfo({
            customerId: queryParams.customerId,
            customerName: queryParams.customerName,
            current: queryParams.current,
            size: queryParams.size
        });
        const page1 = await itemListInfo({
            customerId: queryParams1.customerId,
            customerName: queryParams1.customerName,
            current: queryParams1.current,
            size: queryParams1.size
        });
        // 校验返回值是否有效
        if (page && Array.isArray(page.records)) {
            tableData.value = page.records;
            queryParams.total = page.total || 0;
            tableData1.value = page1.records;
            queryParams1.total = page1.total || 0;
        } else {
            console.warn("返回的数据结构异常:", page);
            tableData.value = [];
            queryParams.total = 0;
        }
        loading.value = false;
    } catch (e) {
        console.error("查询列表失败:", e);
        loading.value = false;
    }
}
const deleteSetIteming = (id) => {
    ElMessageBox.confirm(
        '是否确认删除该用户护理配置信息?',
        'Warning',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteSetItem(id).then(success => {
                ElNotification({
                    title: '消息',
                    type: 'success',
                    message: "删除成功",
                })
                queryList();
            })
        })
}
const deleteSeting = (id) => {
    ElMessageBox.confirm(
        '是否确认删除该用户护理配置信息?',
        'Warning',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteSet(id).then(success => {
                ElNotification({
                    title: '消息',
                    type: 'success',
                    message: "删除成功",
                })
                queryList();
            })
        })
}

onMounted(() => {
    queryList()
})
</script>

<style scoped>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

.insertButton {
    margin: 0px 0px 10px 0px;
}

.divider {
    margin: 0px 0px 10px 0px;
}

.search-box {
    width: 100%;
    margin: 0px 0px 10px 0px;
}

/* 客户信息 */
.customerInfo {
    width: 750px;
    height: 650px;
    border: 1px solid rgb(0, 0, 0);
    margin-right: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}

.customerInfo .title {
    background-color: #61b3ff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    /* 将文字居中 */
    margin: 0;
    /* 移除默认的外边距 */
    padding: 10px;
    /* 添加内边距 */
    color: #333;
    /* 深灰色文字 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}

/* 外出登记 */
.outward {
    margin: 0;
    width: 690px;
    height: 650px;
    border: 1px solid rgb(0, 0, 0);
    /* margin-right: 20px; */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}

.outward .title {
    background-color: #61b3ff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    /* 将文字居中 */
    margin: 0;
    /* 移除默认的外边距 */
    padding: 10px;
    /* 添加内边距 */
    color: #333;
    /* 深灰色文字 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
}
</style>
